/**
* 左边菜单
*/ 
<template>
  <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened
    class="el-menu-vertical-demo" background-color="transparent" text-color="#fff">
    <div class="logobox">
      <!-- <img class="logoimg" src="../assets/img/logo.png" alt="" /> -->
      <div>桃桃星球</div>
    </div>
    <el-submenu v-for="menu in allmenu" :key="menu.menuid" :index="menu.menuname">
      <template slot="title">
        <div>
          <img style="width: 20px; height: 20px" :src="menu.img" alt="" />
          <span style="color: #777777">{{ menu.menuname }}</span>
        </div>
      </template>
      <el-menu-item-group>
        <el-menu-item v-for="chmenu in menu.menus" :index="'/' + chmenu.url" :key="chmenu.menuid">
          <span style="color: #777777">{{ chmenu.menuname }}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  name: "leftnav",
  data() {
    return {
      collapsed: false,
      allmenu: [],
    };
  },
  // 创建完毕状态(里面是操作)
  created() {
    // 获取图形验证码
    let res = {
      success: true,
      data: [
        {
          menuid: 1,
          icon: "li-icon-xiangmuguanli",
          menuname: "信息总览",
          // hasThird: null,
          url: "",
          img: require("@/assets/img/home/tongji.png"),
          menus: [
            {
              menuid: 79,
              icon: "icon-cus-manage",
              menuname: "信息总览",
              hasThird: "N",
              url: "userInfo/userInfo",
              menus: null,
            },
          ],
        },
        {
          menuid: 71,
          icon: "li-icon-xitongguanli",
          menuname: "成员管理",
          hasThird: null,
          url: null,
          img: require("@/assets/img/home/pop.png"),
          menus: [
            {
              menuid: 72,
              icon: "icon-cus-manage",
              menuname: "工会成员",
              hasThird: "N",
              url: "user/user",
              menus: null,
            },
          ],
        },
        {
          menuid: 128,
          icon: "li-icon-shangchengxitongtubiaozitihuayuanwenjian91",
          menuname: "直播管理",
          hasThird: null,
          url: null,
          img: require("@/assets/img/home/zhibo.png"),
          menus: [
            {
              menuid: 129,
              icon: "icon-provider-manage",
              menuname: "房间管理",
              hasThird: "N",
              url: "rootManage/rootManage",
              menus: null,
            },
          ],
        },
      ],
      msg: "success",
    };
    this.allmenu = res.data;
    // 监听
    this.$root.Bus.$on("toggle", (value) => {
      this.collapsed = !value;
    });
  },
  methods: {
    urlSw(url) {
      console.log('url', url);
      if (url && url != null) {
        this.$router.push(url);
      }
    },
  },
};
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}

.el-menu-item-group__title {
  padding: 0px;
}

.el-menu-bg {
  /* background-color: #1f2d3d !important; */
}

.el-menu {
  border: none;
}

.logobox {
  width: 200px;
  height: 40px;
  line-height: 40px;
  color: #202020;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}

.logoimg {
  height: 40px;
}

.el-submenu .el-submenu__title:hover {
  /* width: 260px !important; */
  background: #ffffff !important;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05),
    0px 0px 3px 0px rgba(192, 147, 147, 0.2);
  border-radius: 14px !important;
}

.el-menu-item.is-active {
  background: #ffffff !important;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05),
    0px 0px 3px 0px rgba(192, 147, 147, 0.2);
  border-radius: 14px !important;
}
</style>